<template>
	<el-card class="box-card table">
		<template #header>
			<div class="card-header">
				<span>
					<el-breadcrumb separator="/">
						<el-breadcrumb-item :to="{ path: '/product/list' }">商品列表</el-breadcrumb-item>
						<el-breadcrumb-item>新增</el-breadcrumb-item>
					</el-breadcrumb>
				</span>
				<router-link :to="{ path: '/product/list' }">
					<el-button class="button" type="success" icon="el-icon-back" size="small">返回</el-button>
				</router-link>
			</div>
		</template>
		<div class="body">
			<el-form :model="form" ref="form" status-icon :rules="rules" label-width="80px" size="small">
				<el-form-item label="名称" prop="name">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="商品图片" prop="image">
					<div class="productImage">
						<uploadSingle @getImageUrl="getImageUrl" :imageUrl="form.image"></uploadSingle>
					</div>
				</el-form-item>



				<el-form-item label="商品分类" prop="category_id">
					<div class="product_category">
						<el-select v-model="form.category_id" placeholder="请选择">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-form-item>
				<el-form-item label="单价" prop="price">
					<el-input v-model="form.price" type="number" min="0" step="0.01"></el-input>
				</el-form-item>
				<el-form-item label="库存数量" prop="stock_quantity">
					<el-input v-model="form.stock_quantity" type="number"></el-input>
				</el-form-item>

				<el-button type="primary" @click="submitForm('form')">立即创建</el-button>
				<el-button @click="resetForm('form')">重置</el-button>
			</el-form>
		</div>
	</el-card>
</template>

<script>
	import {
		productAdd,
		getCategorySelect
	} from "@/api/index.js";
	import {
		ElMessage
	} from "element-plus";
	import uploadSingle from "@/components/UploadSingle.vue"
	export default {
		name: "ProductAdd",
		components: {
			uploadSingle
		},
		data() {
			return {
				showInput: false,
				options: [],
				form: {
					name: "",
					image: "",
					category_id: "",
					price: "",
					stock_quantity: "",

				},
				rules: {
					name: [{
						required: true,
						message: "请输入名称",
						trigger: "blur"
					}],
					image: [{
						required: true,
						message: "请上传商品图片",
						trigger: "blur"
					}],
					category_id: [{
						required: true,
						message: "请选择商品分类",
						trigger: "blur"
					}],
					price: [{
						required: true,
						message: "请输入商品单价",
						trigger: "blur"
					}],
					stock_quantity: [{
						required: true,
						message: "请输入商品库存数量",
						trigger: "blur"
					}],
				},
			};
		},
		created() {
			this.getCategorySelect()
		},
		mounted() {},
		methods: {
			async submitForm(form) {
				//自动验证
				this.$refs[form].validate((valid) => {
					if (!valid) {
						return false;
					}
				});
				console.log(this.form)
				// return false
				await productAdd(this.form)
					.then((res) => {
						console.log(res);
						if (res.code == 1) {
							this.$message.success('新增成功')
							this.$router.push('/product/list');
						} else {
							this.$message.error(res.message)
						}
					})
					.catch((error) => {});
			},
			resetForm(form) {
				this.$refs[form].resetFields();
			},
			getImageUrl(ImageUrl) {
				this.form.image = ImageUrl
			},
			async getCategorySelect() {
				const result = await getCategorySelect()
				if (result.code == 1) {
					this.options = result.data
				}
			}
		},
	};
</script>
<style>
	.productImage {
		text-align: left;
	}

	.product_category {
		text-align: left;
	}
</style>